<template>
    <view>
        <uni-nav-bar fixed left-icon="back" title="商品列表" @clickLeft="clickLeft()"></uni-nav-bar>

        <view class="row">
            <view class="tui-flex flex">
                <view class="list_1" v-for="(item,index) in list" :key="index" @tap="navTo(item)">
                    <view class="r_img">
                        <image class="image" v-if="item.pic" :src="item.pic"></image>
                        <view class="img_txt" v-else>暂无图片</view>
                    </view>
                    <view style="padding: 20rpx 15rpx;">
                        <view class="r_des">{{item.name}}</view>
                        <view class="t_price tui-flex" v-if="item.rent != 0 || item.deposit != 0">
                            <view v-if="item.rent != 0" style="color: #999;">
                                ￥<text style="font-size: 34rpx;color: #FF6600;">{{item.rent}}</text>
                                {{{'0':'/天','1':'/时'}[item.rentUnit]}}
                            </view>
                            <view v-if="item.deposit != 0" style="color: #999;">押:
                                ￥<text style="font-size: 34rpx;color: #FF6600;">{{item.deposit}}</text>
                            </view>
                        </view>
                        <view v-if="item.rent == 0 && item.deposit == 0" class="btn">
                            <text class="btn-bcg">免费租</text>
                        </view>
                        <!--<view v-else class="btn">
                            <text class="btn-bcg" style="background: #FF6666">免租金</text>
                        </view>-->
                    </view>
                </view>
            </view>
            <tui-nomore text="已经到最底了" backgroundColor="#f7f7f7"></tui-nomore>
        </view>
    </view>
</template>

<script>
    import tuiNomore from '@/components/tui-nomore/tui-nomore.vue'

    export default {
        name: "leaseItem.vue",
        components: { tuiNomore },
        data() {
            return {
                list: [],
                uId: ''
            }
        },
        onLoad(option) {
            this.uId = option.id
            this.getList(option.id)
        },
        methods: {
            getList(id) {
                uni.showLoading()
                uni.request({
                    url: `lease/item/${id}`,
                    method: 'GET',
                    header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')},
                    success: (res) => {
                        this.list = res.data.data
                        uni.hideLoading();
                    },
                    fail: (res) => {
                        uni.hideLoading();
                        uni.showToast({ title: res.data.message, icon:'none' })
                    }
                })
            },
            clickLeft() {
                uni.navigateBack()
            },
            navTo(item) {
                uni.navigateTo({
                    // url: `/pagesA/coupons/leaseDetail?data=${JSON.stringify(item)}`
                    url: `/pagesA/coupons/leaseDetail?id=${item.id}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .row {
        padding: 30rpx 0;
        .flex {
            justify-content: space-between;
            flex-wrap: wrap;
            margin: 0 12rpx;
        }
        .list_1 {
            /*width: 42%;*/
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 15rpx;
            flex: 0 1 49.5%;
            overflow: hidden;
            line-height: 1.5;
            .r_img {
                border-radius: 15rpx 15rpx 0 0;
                width: 100%;
                height: 330rpx;
                overflow: hidden;
                text-align: center;
                background: #f2f2f2;
                position: relative;
                .img_txt {
                    /*font-size: 34rpx;*/
                    position: absolute;
                    left: 30%;
                    line-height: 9;
                    height: 100%;
                    color: #999;
                }
                .image {
                    border-radius: 15rpx 15rpx 0 0;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left:0;
                }
            }
            .r_des {
                font-size: 30rpx;
            }
            .t_price {
                font-size: 26rpx;
                justify-content: space-between;
            }
            .btn {
                color: #fff;
                text-align: right;
                .btn-bcg {
                    border-radius: 15rpx;
                    background: red;
                    padding: 10rpx 20rpx;
                }
            }
        }
    }
</style>